import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import { Tree, Button, message } from "antd";
import styles from "./robotAdd.less";
import { getTemplateTreeList, setTemplateTreeList } from '@/services/modelInstruction';
const { TreeNode } = Tree;

class InstructList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            expandedKeys: [],
            checkedKeys: [],
            selectedKeys: [],
            instructIds: [],
        };
    }

    componentDidMount() {
        if (this.props.onRef) {
            this.props.onRef(this);
        }
    }

    getList = async () => {
        const { applicationId } = this.props;
        let res = await getTemplateTreeList({ applicationId });
        console.log(res);
        let list = [], checkedFileIds = [], categoryIds = [], instructIds = [];
        list[0] = res;
        function getChildren(data) {
            data.map((item) => {
                // console.log(item);
                if (item.children && item.children.length > 0) {
                    getChildren(item.children);
                };
                if (item.check) {
                    checkedFileIds.push(item.id);
                };
                if (item.parentId && item.parentId !== '0') {
                    instructIds.push(item.id);
                } else {
                    categoryIds.push(item.id);
                }
            });
        }

        if (list.length) {
            getChildren(list);
        }

        console.log(checkedFileIds, categoryIds, instructIds);

        this.setState({ list, checkedKeys: checkedFileIds, instructIds, expandedKeys: categoryIds })
    }

    onSubmit = async () => {
        const { applicationId } = this.props;
        const { checkedKeys, instructIds } = this.state;
        let obj = {
            applicationId,
            qtIds: checkedKeys.filter(k => instructIds.indexOf(k) > -1),
            categoryIds: checkedKeys.filter(k => instructIds.indexOf(k) === -1),
        };
        let res = await setTemplateTreeList(obj);
        console.log(res);
        if (res.code === 0) {
            message.success(formatMessage({ id: 'robotManagement.instructList.success' }));
            this.getList();
        }
    };

    onExpand = (expandedKeys) => {
        this.setState({ expandedKeys, autoExpandParent: false });
    };

    onCheck = (checkedKeys) => {
        this.setState({ checkedKeys });
    };

    renderTreeNodes = (data) =>
        data.map((item) => {
            if (item.children) {
                return (
                    <TreeNode title={item.name} key={item.id} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.id} title={item.name} {...item} />;
        });

    render() {
        const { list, checkedKeys } = this.state;

        return (
            <div style={{ padding: "10px 10px 10px 30px" }}>
                <div style={{ maxHeight: '54vh', minHeight: '120px', marginBottom: 20, overflowY: 'auto', display: 'inline-flex' }}>
                    <Tree
                        checkable
                        onExpand={this.onExpand}
                        expandedKeys={this.state.expandedKeys}
                        autoExpandParent={true}
                        onCheck={this.onCheck}
                        checkedKeys={checkedKeys}
                        selectable={false}
                    >
                        {this.renderTreeNodes(list)}
                    </Tree>
                </div>

                <Button type="primary" onClick={this.onSubmit} style={{ display: 'block' }}>{formatMessage({ id: 'robotManagement.instructList.confirm' })}</Button>
            </div>
        );
    }
}

export default InstructList;
